<template>
  <div class="business-container">
    <!-- 标题 -->
    <div class="title" flex-center mt-20 text-20>
      <h2>业务详情</h2>
    </div>

    <!-- 量表卡片展示 -->
    <div class="text-card-show" m-20>
      <div>
        <BusinessCard
          v-for="item in businessList"
          :key="item.testbusinessId"
          :data="item"
          mt-20
        ></BusinessCard>
      </div>
    </div>

    <!-- 详细描述 -->
    <div class="text-detail" p-20 pt-0>
      <el-card class="card" border-rd-20px>
        <!-- 问卷介绍 -->
        <div class="card-detail">
          <h1 text-21px flex items-center>
            <el-icon><Files /></el-icon>
            <p ml-10>问卷介绍</p>
          </h1>
          <p class="p-label">
            尊敬的参与者，您好！感谢您参与本次人缘测试问卷。本问卷旨在了解您在人际交往中的表现和受欢迎程度，帮助您更好地认识自己在人际关系中的优势与不足。通过这份问卷，我们将从多个维度对您的人缘进行评估，为您提供有针对性的建议，以促进您的人际关系和谐发展。
          </p>
          <p></p>
        </div>

        <el-divider />

        <!-- 服务对象 -->
        <div class="card-detail">
          <div>
            <h1 text-21px flex items-center>
              <el-icon><User /></el-icon>
              <p ml-10>服务对象</p>
            </h1>
            <p class="p-label">
              1、学生群体：帮助学生认识到自己在同学中的地位，提高人际沟通能力，促进校园和谐氛围。<br />
              2、企业员工：通过本次测试，员工可以了解自己在团队中的角色定位，提升团队协作能力，增强企业凝聚力。<br />
              3、社会工作者：使社工更好地了解与服务对象的互动关系，提高服务水平，增进与服务对象的友谊。<br />
              4、自我提升者：助力参与者发现自己在人际交往中的潜在问题，有针对性地进行自我调整，提升个人魅力。<br />
            </p>
          </div>
        </div>

        <el-divider />

        <!-- 完成情况 -->
        <div class="card-detail">
          <div>
            <h1 text-21px flex items-center>
              <el-icon><EditPen /></el-icon>
              <p ml-10>完成情况</p>
            </h1>
            <p class="p-label">
              <el-button>12 / 100</el-button> 实测/应测（单位：个）
            </p>
          </div>
        </div>

        <el-divider />

        <!-- 开始时间 -->
        <div class="card-detail">
          <div>
            <h1 text-21px flex items-center>
              <el-icon><Timer /></el-icon>
              <p ml-10>开始时间</p>
            </h1>
            <p class="p-label">
              <el-button>2024-07-28 14:00</el-button>
            </p>
          </div>
        </div>

        <el-divider />

        <!-- 结束时间 -->
        <div class="card-detail">
          <div>
            <h1 text-21px flex items-center>
              <el-icon><AlarmClock /></el-icon>
              <p ml-10>结束时间</p>
            </h1>
            <p class="p-label">
              <el-button>2024-08-04 14:00</el-button>
            </p>
          </div>
        </div>
      </el-card>
    </div>

    <div class="button" p-20px pt-0>
      <el-card border-rd-20px>
        <div flex justify-center h="[100%]" p-5px>
          <el-button type="primary" size="large">点击测试</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import BusinessCard from "../business/components/BusinessCard.vue";

const businessList = [
  {
    testbusinessId: "10",
    schoolName: "人缘测试问卷",
    description: "人缘评估、社会交涉能力、情商",
    requestDate: "2024-07-28",
  },
];
</script>

<script>
export default {
  name: "Text-detail",
};
</script>

<style lang="scss" scoped>
.text-card-show {
  transition: all 0.2s;
}
.text-card-show:active {
  transform: scale(0.98);
}
.p-label {
  font-family: cursive;
  font-size: 18px;
  line-height: 25px;
  margin-top: 15px;
}
</style>
